<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24_flex布局_某个元素偏向一侧排列</title>
    <style>
      .parent-box {
        width: 1200px;
        height: 800px;
        border: 1px solid #999999;
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: flex-end;
      }
      .child {
        width: 150px;
        height: 50px;
        background-color: pink;
        margin-right: 10px;
        margin-top: 10px;
        line-height: 50px;
        text-align: center;
      }

    </style>
</head>
<body>
<div class="parent-box">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child" style="margin-top: auto;margin-bottom: 20px">5</div>
</div>
</body>
</html>